<template>
  <el-dialog  style="height: 80% ;width:95%;overflow: auto;  z-index: 9999;">
    <el-form :model="form1" ref="form1" label-width="85px" v-if="parentDatass1?true:false">
        <div class="ttp">查询</div>
      <el-form-item label="药品名称">
        <el-input v-model="value1" autocomplete="off" placeholder="请输入药品名称/拼音首码" class="et"  @keyup.enter="handleGoKey"></el-input>
      </el-form-item>
         <el-form-item label="药品分类">
        <el-select v-model="value2" placeholder="Select" style="width: 240px">
      <el-option
        v-for="item in options1"
        :key="item.Type_ID"
        :label="item.Type_Name"
        :value="item.Type_ID"
      />
    </el-select>
        <van-calendar
            ref="form1.date2"
            switch-mode="year-month"
            :show="form1.showCalendar1"
            @confirm="onConfirmDate1($event, 'date1')"
            @close="form1.showCalendar1 = false"
        />
      </el-form-item>
      <div  class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button type="success" @click="submitForm1">常用药品</el-button>

      </div>
    </el-form>
    <div slot="footer">
      <div class="tb" overflow: auto>
        <div class="tb-top">查询列表</div>
        <el-table
              :data="tabledata"
                style="width: 100%"
                overflow-y:auto
                height="350"
                virtual-scroll-list
                v-loading="loading==false"
                @current-change="handleCurrentChange"
                highlight-current-row
                element-loading-text="拼命加载中..."
                element-loading-spinner="el-icon-loading"
                border
                >
                <el-table-column
               
                  prop="Medi_Name"
                  label="药品名称"
                  >
                </el-table-column>
                <el-table-column
                  prop="Medi_DoseUnitName"
                  label="用法"
                 
                  >
                </el-table-column>
                <el-table-column
              
                  prop="Medi_freqName"
                  label="用法周期">
                </el-table-column>
                <el-table-column
               
                  prop="Medi_EachDose"
                  label="每周期用次">
                </el-table-column>
                <el-table-column
                  prop="Medi_EachDoseUnit"
                 
                  label="每次用量">
                </el-table-column>
                <el-table-column
               
                  prop="Medi_UseDate"
                  label="用药时间值">
                </el-table-column>
                <el-table-column
               
                  prop="Medi_UseDateUnitName"
                  width="100px"
                  label="用药时间单位">
                </el-table-column>
                <el-table-column
             
                  prop="Medi_MedicineYieldName"
                  label="服药依从性">
                </el-table-column>
                <el-table-column
               
                  prop="Medi_Sugg"
                  label="诊断名称">
                </el-table-column>
                <el-table-column
               
                  prop="Medi_UseCount"
                  label="使用次数">
                </el-table-column>
                <el-table-column
                  label="操作" >
                  <template #default="scope">
                    <el-button   class="scopebutton" size="small" type="primary" @click="handleqy(scope.row)">选择</el-button>
                </template>  
                </el-table-column>
              </el-table>
      </div>
    </div>
  </el-dialog>
</template>
 
<script>
import moment from 'moment';
import{ userStore} from '../../stores/user.ts'
export default {
  data() {
    return {
      options1:[],
      form1: {
        data: '',
        date1:"",
        date2:"",
        date3:"",
        date4:"",
        date5:"",
        showCalendar1:false,
        showCalendar2:false,
        dialogVisible:true
      },
      form2: {
        data: '',
        date1:"",
        date2:"",
        date3:"",
        date4:"",
        date5:"",
        showCalendar1:false,
        showCalendar2:false,
        dialogVisible:true
      },
      form3: {
        data: '',
        name:"",
        date1:"",
        date2:"",
        showCalendar1:false,
        dialogVisible:true
      },
      yp:{},
      tabledata:[],
      options:[
        {
    Qid: '1',
    label: '药品名称',
  },
  {
    Qid: '2',
    label: '诊断名称',
  },
],
value1:"",
value2:"0",
value3:"1",
dialogVisible:false
     
    };
  },
  props: ['parentDatas1','parentData2','parentData3',"parentDatass1"],
created(){
      this.Interface_Code= sessionStorage.getItem("item")
      this.User_Code=JSON.parse( sessionStorage.getItem("UserInfo")).sUser_Code
     this.user=userStore()
     this.GetMediTypes()
     this.value2="0"
},
mounted(){
this.value2="0"
},
  methods: {
    GetMediTypes(){
          axios.post(window.globalUrl.server+"Service.asmx/GetMediTypes",JSON.stringify({
    User_Code: this.User_Code,
    Interface_Code:this.Interface_Code,
    Query_Type:'1'
  })).then((res)=>{
      this.options1=JSON.parse(res.data.RltData)
  }).catch((eorro)=>{

  })
    },
  handleGoKey(event) {
  // 关闭软键盘的示例代码
  if (event.key === 'Enter') {
        event.target.blur();
      }// 假设你的input元素有ref="input"
},
    handleqy(val){
        this.yp=val
        console.log("bbbbb",this.yp)
        this.dialogVisible=false
        this.$emit('submitss1', this.dialogVisible,this.yp);
        this.yp={}
        this.tabledata=[]
        this.value2="0"
        this.value1=""
               
    },
    handleCurrentChange(val) {
      console.log('选中的行:', val);
    },
    formatDate(date){
      return  moment(date).format('YYYY-MM-DD')
    },
    onConfirm1(value){
      this.form1.date1 =this.formatDate(value);
      this.form1.showCalendar = false;
    },
    onConfirmDate1(date, field) {
        console.log(date)
        console.log(field)
      if (field === 'date1') {
        this.form1.date1 = this.formatDate(date);
        this.form1.showCalendar1 = false;
      } else {
        this.form1.date2 = this.formatDate(date);
        this.form1.showCalendar2 = false;
      }
    },
    onConfirmDate2(date, field) {
        console.log(date)
        console.log(field)
      if (field === 'date1') {
        this.form2.date1 = this.formatDate(date);
        this.form2.showCalendar1 = false;
      } else {
        this.form2.date2 = this.formatDate(date);
        this.form2.showCalendar2 = false;
      }
    },
    onConfirmDate3(date, field) {
        console.log(date)
        console.log(field)
      if (field === 'date1') {
        this.form3.date1 = this.formatDate(date);
        this.form3.showCalendar1 = false;
      }
    },
    submitForm() {
        console.log(this.value1)
        axios.post(window.globalUrl.server+"Service.asmx/GetMedis",JSON.stringify({
    User_Code: this.User_Code,
    Interface_Code:this.Interface_Code,
    Query_Value:this.value1,
    Query_Type:this.value2=="0"?"":this.value2
  })).then((res)=>{
    if(res.data.RltCode==2){
        this.tabledata=[]
    }else if(res.data.RltCode==1){
        this.tabledata=JSON.parse(res.data.RltData)
            console.log(res)
            console.log(JSON.parse(res.data.RltData))
    }else if(res.data.RltCode==0){
      this.tabledata=[]
    }

  }
  )
     
    },
    submitForm1() {
        console.log(this.value1)
    axios.post(window.globalUrl.server+"Service.asmx/GetMedis",JSON.stringify({
    User_Code: this.User_Code,
    Interface_Code:this.Interface_Code,
     Query_Value:this.value1,
    Query_Type:this.value2,
    Query_IsOften:this.value3
  })).then((res)=>{
    if(res.data.RltCode==2){
        this.tabledata=[]
    }else if(res.data.RltCode==1){
        this.tabledata=JSON.parse(res.data.RltData)
            console.log(res)
            console.log(JSON.parse(res.data.RltData))
    }else if(res.data.RltCode==0){
      this.tabledata=[]
    }

  }
  )
     
    }
  }
};
</script>
<style scoped>
.tb-top{
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}
::v-deep .el-table .cell{
    padding: 0 5px !important;
    font-size: 12px;
    display: flex;
    justify-content: center;
}
.tb{
    margin-top: 50px;
}
::v-deep .et{
   width: 240px !important;
   border: 0px solid !important;
}
.ttp{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 20px;
}
::v-deep .el-form-item__label{
  font-size: 12px !important;
}
::v-deep .dialog-footer{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
::v-deep  .van-field{
    border-bottom: 0px solid !important;
    align-items: center;
    background-color: var(--el-input-bg-color,var(--el-fill-color-blank));
    background-image: none;
    border-radius: var(--el-input-border-radius,var(--el-border-radius-base));
    box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
    cursor: text;
    display: inline-flex;
    flex-grow: 1;
    justify-content: center;
    padding: 1px 11px;
    transform: translateZ(0);
    transition: var(--el-transition-box-shadow);
}
::v-deep .van-field__body{
    border: 0px solid !important;
}
.el-form {
    --el-form-label-font-size: var(--el-font-size-base);
    --el-form-inline-content-width: 220px;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.et{
  
}
</style>